<script src="/javascripts/widget_dlg.js"></script>
<h1>Create a Custom Annorate Widget</h1>
<ol>
  <li>Select the options you want.</li>
  <li>Copy and Paste the HTML snippet into your web page.</li>
  <li>Rate the page and add your comment.</li>
</ol>

<div id="annoration-widget-main-container">
  <h1 id="annoration-widget-header">Annorate Widget</h1>
  <div id="annoration-widget-main-content">
    <div id="annoration-widget-average-rating">
      <label id="annoration-widget-average-rating-label">Average Rating:</label> <%= (@page.average_rating / 2.0).to_s %>
    </div>
    <script>nSpecifiedRating = <%= (@page.average_rating / 2.0).to_s %>;</script>
    <div style="display: none" id="rating"></div>
    <div id="annoration-widget-stars" style="display:inline;" onmouseout="leaveStars()">
      <img onmouseout="leaveStar()" onclick="clickStar(1)" onmouseover="overStar(1)" src="http://<%=request.env['HTTP_HOST']%>/images/star_empty_small.gif" id="star_1"/>
      <img onmouseout="leaveStar()" onclick="clickStar(2)" onmouseover="overStar(2)" src="http://<%=request.env['HTTP_HOST']%>/images/star_empty_small.gif" id="star_2"/>
      <img onmouseout="leaveStar()" onclick="clickStar(3)" onmouseover="overStar(3)" src="http://<%=request.env['HTTP_HOST']%>m/images/star_empty_small.gif" id="star_3"/>
      <img onmouseout="leaveStar()" onclick="clickStar(4)" onmouseover="overStar(4)" src="http://<%=request.env['HTTP_HOST']%>/images/star_empty_small.gif" id="star_4"/>
      <img onmouseout="leaveStar()" onclick="clickStar(5)" onmouseover="overStar(5)" src="http://<%=request.env['HTTP_HOST']%>/images/star_empty_small.gif" id="star_5"/>
    </div>
    <div id="annoration-widget-total-ratings">
      (<%= @page.total_ratings %> rating<% if @page.total_ratings > 1 %>s<% end %>)
    </div>
    <div id="annoration-widget-comments">
      <% @annorations.each do |x| %>
        <div class="annoration-widget-summaries">
          <img src="/images/sm_stars_<%= (x.rating * 2).to_s %>.gif" /> 
          <%=x.comment%> <span class="annoration-widget-comment-user"><a href="http://<%=request.env['HTTP_HOST']%>/users/annorations/<%= x.user.login %>" target="_blank"><%=x.user.login%></a></span></div><% end %>
    </div>
  </div>
</div>

<div id="widget-configurator">
  <h2 style="margin-bottom: 0px;">Standard Options</h2>
  <input type="checkbox" id="show-header" onchange="showHeader();" checked>show header</input><br/>
  <input type="checkbox" name="required-options" id="average-rating" onchange="showAverageRating();" checked>include average rating</input>
  <div id="annoration-widget-average-rating-text-container" style="display: inline;"><br /><label style="margin-left: 20px;">Rating Title (enter to change): <input type="text" id="annoration-widget-average-rating-text" value="Average Rating:" onchange="updateAverageMessage()"></input></label></div><br/>
  <input type="checkbox" name="required-options" id="show-stars" onchange="showStars();" checked>show stars</input><br />
  <div id="annoration-widget-star-over-colors" style="margin-left: 20px;">choose star over color (hover over the rating stars to see):<br />
    <input type="radio" name="annoration-widget-star-over-color" id="annoration-widget-star-over-color-green" value="green" checked onchange="setStarOverColor()">Green</input>
    <input type="radio" name="annoration-widget-star-over-color" value="blue" onchange="setStarOverColor()">Blue</input>
    <input type="radio" name="annoration-widget-star-over-color" value="purple" onchange="setStarOverColor()">Purple</input>
    <input type="radio" name="annoration-widget-star-over-color" value="red" onchange="setStarOverColor()">Red</input>
  </div>
  <input type="checkbox" name="required-options" id="number_ratings" onchange="showNumberRatings();" checked>show total ratings</input><br />
  <input type="checkbox" id="show-border" onchange="showBorder();" checked>show widget border</input><br />
  <input type="checkbox" name="required-options" id="show-summaries" onchange="showSummaries();" checked>show annoration summaries</input><br />
  <div id="annoration-summary-number-container" style="margin-left: 20px;">
    Maximum number of summaries to show (up to 5): <input type="text" size="3" id="annoration-summary-number"></input>
  </div>
  <div id="advanced-url" style="margin-top: 10px;">
    <h2 style="margin-bottom: 0px;">Advanced Options</h2>
    <input type="checkbox" id="annoration-widget-require-login">require annoration login (if selected users must log in to an <a href="http://www.annorate.com/" target="_blank">Annorate</a> account to rate your resource)</input><br />
    <input type="checkbox" id="custom-url" value="" onclick="showCustomUrl()">use custom url (if not selected the url for the page the widget is on will be used)</input><br />
    <div id="annoration-widget-custom-url-container" style="display: none; margin-left: 20px;">
      Use the complete url starting with http://<br />
      <input type="text" size="60" id="annoration-widget-custom-url"></input>
    </div>
  </div>
  <input type="button" id="build-widget" value="" onclick="buildWidgetSnippet()" />

</div>

<div id="html-snippet" style="display: none">
  <div id="style-information">
    <p>The following data should be pasted into the header of the page to style the document in the manner seen on this page.</p>
    <textarea id="annoration-styles" cols="80" rows="10"></textarea>
  </div>
  <div id="html-information">
    <p>The following data should be pasted where you would like the annoration widget to appear.</p>
    <textarea id="annoration-html" cols="80" rows="10"></textarea>
  </div>
</div>

<script src="/javascripts/widget_config.js"></script>